<template>
  <li>
    <input type="checkbox" :checked="done" @change="handchange" />
    <input
      type="text"
      v-if="isedit"
      :value="text"
      @keyup.enter="handleEdit"
      @blur="handleEdit"
    />
    <span v-else @click="isedit = true" :class="active">{{ text }}</span>
    <button @click="handleDelete">删除</button>
  </li>
</template>

<script setup>
import { ref, computed } from 'vue';
const emit = defineEmits(['toggle', 'edit', 'delete']);
const props = defineProps({
  id: {
    type: String,
    required: true,
  },
  text: {
    type: String,
    required: true,
  },
  done: {
    type: Boolean,
    required: true,
  },
});
const isedit = ref(false);
const handleDelete = () => {
  emit('delete');
};
const handchange = (event) => {
  emit('toggle', props.id, event.target.checked);
};
const handleEdit = (event) => {
  isedit.value = false;
  emit('edit', props.id, event.target.value.trim());
};
const active = computed(() => {
    return props.done ? 'active' : '';
    });
</script>

<style scoped>
main ul {
  margin: 0;
  padding: 0;
}
main li {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 40px;
  list-style: none;
  border-bottom: 1px solid #ccc;
}
main span,
main input[type='text'] {
  flex: 1;
  margin: 0 20px;
}
main li button {
  padding: 0 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  cursor: pointer;
}
.active {
  /* 已完成事项样式 */
  text-decoration: line-through;
  color: #ccc;
}
</style>